import React, { Component } from "react";

class Tab extends Component {
  componentWillUnmount() {
    // 组件对应的 DOM 元素从页面中删除之前调用
    console.log("component will unmount");
  }
  render() {
    return <h1>顯示</h1>;
  }
}

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false
    };
    console.log("constructor");
  }
  componentWillMount() {
    // 组件挂载开始之前，也就是在组件调用 render 方法之前调用
    console.log("componentWillMount");
  }
  componentDidMount() {
    // 组件挂载完成以后，也就是 DOM 元素已经插入页面后调用
    console.log("componentDidMount");
  }
  handleShow() {
    this.setState({
      isShow: !this.state.isShow
    });
  }
  render() {
    console.log("render");
    return (
      <div>
        {this.state.isShow ? <Tab /> : null}
        <button onClick={this.handleShow.bind(this)}>显示或者隐藏标题</button>
      </div>
    );
  }
}

export default Header;
